<template>
    <div>
      <el-form :model="condition" size="small" :inline="true">
        <el-form-item label="完成情况">
          <el-input v-model="condition.finishInfo" placeholder="请输入完成情况" clearable />
        </el-form-item>
        <el-form-item label="消缺员">
          <el-input v-model="condition.operationUser" placeholder="请输入消缺员" clearable />
        </el-form-item>
        <el-form-item label="任务状态">
          <el-select v-model="condition.state" placeholder="请选择任务状态" clearable>
            <el-option v-for="(s,index) in auditStates" :key="index" :label="s" :value="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
          <el-button icon="el-icon-refresh-left" @click="reset()">重置</el-button>
          <el-button icon="el-icon-circle-plus-outline" @click="showDefectReceptionDialog()">新增</el-button>
        </el-form-item>
      </el-form>
      <div style="height: 34px">
        <el-pagination background align="right" v-show="total > 0"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="pageSizes"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next"
                       :total="total">
        </el-pagination>
      </div>
      <!-- el-table的data属性就是用来绑定这个表格显示的数据 -->
      <el-table :data="defectReceptions" height="250" style="width: 100%">
        <!-- el-table-column表示表格的每一列信息 label属性表示表头的名称
           prop表示绑定的字段名 width属性表示这一列显示的宽度-->
        <el-table-column prop="id" label="回执编号"/>
        <el-table-column prop="defectTaskId" label="工作单据"/>
        <el-table-column prop="finishInfo" label="任务完成情况" />
        <el-table-column prop="pauseRecord" label="间断延期记录" />
        <el-table-column prop="report" label="工作终结报告" />
        <el-table-column prop="state" label="审核状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state === 0">未提交</span>
            <span v-else-if="scope.row.state === 1">待审核</span>
            <span v-else-if="scope.row.state === 2">审核通过</span>
            <span v-else-if="scope.row.state === 3">驳回</span>
          </template>
        </el-table-column>
         <el-table-column prop="operationUser" label="消缺员" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="showDefectReceptionDialog(scope.row)">编辑</el-button>
            <el-button type="text" @click="deleteDefectReception(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :title="`${defectReceptionDialog.isUpdate ? '编辑消缺任务' : '新增消缺任务'}`" :visible.sync="defectReceptionDialog.visible" width="50%">
        <el-form :model="defectReceptionDialog.editDefectReception" :rules="defectReceptionDialog.defectReceptionRules" ref="defectReceptionForm" :inline="true">
          <el-form-item label="回执编号" v-show="defectReceptionDialog.isUpdate">
            <el-input v-model="defectReceptionDialog.editDefectReception.id" readonly/>
          </el-form-item>
          <el-form-item prop="defectTaskId" label="工作单据">
            <el-input v-model="defectReceptionDialog.editDefectReception.defectTaskId" placeholder="请输入消缺任务编号" clearable />
          </el-form-item>
          <el-form-item prop="finishInfo" label="完成任务情况">
            <el-input v-model="defectReceptionDialog.editDefectReception.finishInfo" placeholder="请输入完成任务情况" clearable />
          </el-form-item>
          <el-form-item prop="pauseRecord" label="间断延期记录">
            <el-input v-model="defectReceptionDialog.editDefectReception.pauseRecord" placeholder="请输入间断延期记录" clearable />
          </el-form-item>
          <el-form-item prop="report" label="工作终结报告">
            <el-input v-model="defectReceptionDialog.editDefectReception.report" placeholder="工作终结报告" clearable />
          </el-form-item>
          <el-form-item prop="operationUser" label="消缺员">
            <el-input v-model="defectReceptionDialog.editDefectReception.operationUser" placeholder="请输入消缺员" clearable />
          </el-form-item>
          
          <el-form-item prop="state" label="审核状态" v-show="defectReceptionDialog.isUpdate">
            <el-select v-model="defectReceptionDialog.editDefectReception.state" placeholder="请选择审核状态" clearable>
              <el-option v-for="(s,index) in auditStates" :key="index" :label="s" :value="index"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    name: "DefectReception",
    data(){
      return {
        condition: {
          defectTaskId: '',
          state: '',
          operationUser: ''
        },
        auditStates: ['未提交', '待审核', '审核通过', '驳回'],
        defectReceptions: [],
        currentPage: 1, //分页的默认页码应该是第一页
        pageSizes: [50, 100, 150, 200, 400], //可选的每页显示条数
        pageSize: 50, //每页显示条数
        total: 0, //查询的总条数，默认值为0，查询之后才会赋值
        defectReceptionDialog: {
          visible: false,
          isUpdate: false,
          editDefectReception: {
            id: '',
            defectTaskId: '',
            finishInfo: '',
            pauseRecord:'',
            state: '',
            report: '',
            operationUser: ''
          },
          defectReceptionRules: {
            defectTaskId: [
              {required: true, message: '任务编号不能为空', trigger: ['blur', 'change']}
            ],
            report: [
              {required: true, message: ' 工作终结报告', trigger: ['blur', 'change']}
            ],
            finishInfo: [
              {required: true, message: '完成状态不能为空', trigger: ['blur', 'change']}
            ]
          }
        }
      }
    },
    methods: {
      handleSizeChange(val){//这个函数是用来监听每页显示条数的变更
        this.currentPage = 1
        this.pageSize = val
        this.search()
      },
      handleCurrentChange(val){//这个函数是用来监听当前页码变化
        this.currentPage = val
        this.search()
      },
      search(){
        this.doGet('/defectReception', {
          finishInfo: this.condition.finishInfo,
          state: this.condition.state,
          operationUser: this.condition.operationUser,
          currentPage: this.currentPage,
          pageSize: this.pageSize
        }, resp => {
          this.defectReceptions = resp.records
          this.total = resp.total
        })
      },
      showDefectReceptionDialog(defectReception){
        if(defectReception){
          this.defectReceptionDialog.isUpdate = true
          //首先获取user对象的属性集合，然后遍历这个集合，将每一个属性值拷贝到editDefectReception对象中
          Object.keys(defectReception).forEach(key => this.defectReceptionDialog.editDefectReception[key] = defectReception[key])
        } else {
          this.defectReceptionDialog.isUpdate = false
        }
        this.defectReceptionDialog.visible = true
      },
      closeDialog(){
        this.defectReceptionDialog.visible = false
        this.defectReceptionDialog.editDefectReception= {
            id: '',
            defectTaskId: '',
            finishInfo: '',
            pauseRecord:'',
            state: '',
            report: '',
            operationUser: ''
        }
        //重置所有的表单验证，这样可以清除提示信息
        this.$refs['defectReceptionForm'].resetFields();
      },
      save(){
        this.$refs['defectReceptionForm'].validate(valid => {
          if(valid){
            if(this.defectReceptionDialog.isUpdate){
              //这里就可以提交信息去后台服务器保存数据
              this.doPut('/defectReception', this.defectReceptionDialog.editDefectReception, resp => {
                if(resp){
                  this.$message.success("保存成功")
                  this.closeDialog()
                  this.search()
                } else {
                  this.$message.error("保存失败")
                }
              })
            } else {
              this.doPost('/defectReception', this.defectReceptionDialog.editDefectReception, resp => {
                if(resp){
                  this.$message.success("保存成功")
                  this.closeDialog()
                  this.search()
                } else {
                  this.$message.error("保存失败")
                }
              })
            }
          } else {
            return false
          }
        })
      },
      deleteDefectReception(defectReception){
        this.showConfirm(`确定要删除任务${defectReception.id}吗?`, () => {
          //点击确定按钮后才会执行删除动作
          this.doDelete(`/defectReception/${defectReception.id}`, {}, resp  => {
            if(resp){
              this.$message.success("删除成功")
              this.search()
            } else {
              this.$message.error("删除失败")
            }
          })
        })
      },
      reset(){
        this. condition = {
          finishInfo: '',
          state: '',
          operationUser: ''
        }
        this.search()
      }
    },
    mounted() { //这个函数是一个钩子函数，有vue自动调用，在页面完成挂载之后就会调用这个函数
      this.search()
    }
  }
  </script>
  
  <style scoped>
  
  </style>